<script setup lang="ts">
import {
  getPartyEvent,
  setPartyEvent
} from '@/service/api/sys/dataWarehouse/party'
import SvgIcon from '@/common/svg-icon/SvgIcon.vue'
import { ElMessage } from 'element-plus'
interface tableFormType {
  name?: Number | String
  num?: Number | String
}
const props = defineProps({
  filterRule: {
    type: Object,
    default: () => ({
      partyOrgId: 1,
      year: 2023
    })
  }
})

const tableForm = ref<Array<tableFormType>>([]) // 表格
const disabled = ref(false) // 当前可编辑的状态: 可编辑 不可编辑

// 获取区域概况 更改当前编辑状态未不可编辑
const updateArea = async () => {
  const res = await getPartyEvent(props.filterRule)
  tableForm.value = res.data.contentList || []
  disabled.value = false
}

// 监测传入的筛选条件改变, 获取数据
watch(
  () => props.filterRule,
  () => updateArea(),
  {
    immediate: true,
    deep: true
  }
)

// 新增当前内容
const addData = () => {
  tableForm.value.push({
    name: '',
    num: 0
  })
}

// 删除当前表格内的某个内容
const deleteData = (key: number) => {
  tableForm.value.splice(key, 1)
}

// 更改编辑表格的内容, 利用div来做编辑的方法
const setForm = (key: number, field: string, val: any) => {
  const editType = tableForm.value[key] as { [k: string]: string | number }
  editType[field] = val
}

// 保存编辑
const changeDisabled = () => {
  if (props.filterRule.partyOrgId > 0 && props.filterRule.year > 0) {
    // 保存
    if (disabled.value) {
      const data = {
        ...props.filterRule,
        contentList: [...tableForm.value]
      }
      console.log(data)
      setPartyEvent(data)
        .then(() => {
          ElMessage.success('保存成功!')
        })
        .catch(() => {
          ElMessage.error('保存失败!')
        })
      setTimeout(() => {
        updateArea()
      }, 500)
    } else {
      disabled.value = true
    }
  } else {
    ElMessage.warning('暂无数据, 无法编辑!')
  }
  console.log(tableForm.value)
}
</script>

<template>
  <div class="warehouse">
    <div class="title">党组织活动</div>
    <div class="content">
      <div class="grid grid-cols-3 gap-5 p-5">
        <div v-for="(item, index) in tableForm" :key="index" class="item">
          <div class="label relative">
            <span
              :contentEditable="disabled"
              v-text="item.name"
              @blur="setForm(index, 'name', $event.target.innerHTML)"
              class="text"
              :class="disabled ? 'cursor-pointer' : ''"
            />
            <svg-icon
              v-show="disabled"
              name="icon-dialog-ic_close"
              width="20px"
              height="20px"
              class="absolute right-1 top-1/2 -translate-y-1/2 cursor-pointer rounded bg-[--dialog-backgroundv2] p-0.5"
              @click="deleteData(index)"
            />
          </div>
          <div class="main text-[--auxiliary]">
            <div
              :contentEditable="disabled"
              v-text="item.num"
              @blur="setForm(index, 'num', $event.target.innerHTML)"
              class="text"
            />
          </div>
        </div>
        <div
          v-show="disabled"
          class="flex h-[76px] items-center justify-center border border-dashed border-[--auxiliary]"
        >
          <el-button
            type="success"
            class="button_addTo flex items-center"
            @click="addData"
          >
            <svg-icon
              name="icon-system-button-tianjia"
              width="12px"
              height="12px"
            />
            <span class="ml-1.5">新增板块</span>
          </el-button>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-link v-show="!disabled" :underline="false" @click="changeDisabled">
        <svg-icon name="icon-system-button-bianji" width="14px" height="12px" />
        <span class="text-[--theme]">编辑</span>
      </el-link>
      <el-button
        v-show="disabled"
        type="primary"
        class="button_function"
        @click="changeDisabled"
        size="small"
        >保存</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
